<template>
  <view class="logout-container">
    <view class="logout-content">
      <view class="logout-icon">
        <image src="/static/img/shop/ic_logout.png" mode="aspectFit"></image>
      </view>
      <view class="logout-text">确定要退出登录吗？</view>
      <view class="logout-buttons">
        <button class="cancel-button" @tap="handleCancel">取消</button>
        <button class="confirm-button" @tap="handleLogout">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';

  // 加载状态
  const loading = ref(false);

  // 处理取消
  const handleCancel = () => {
    uni.navigateBack();
  };

  // 处理登出
  const handleLogout = async () => {
    try {
      loading.value = true;
      // 调用用户store的登出方法
      const userStore = sheep.$store('user');
      await userStore.logout();
      
      // 登出成功后跳转到登录页
      uni.reLaunch({ url: '/pages/index/login' });
    } catch (error) {
      console.error('登出失败:', error);
      sheep.$helper.toast('登出失败，请稍后重试');
    } finally {
      loading.value = false;
    }
  };

  // 生命周期钩子
  onLoad(() => {
    // 如果用户未登录，直接跳转到登录页
    const userStore = sheep.$store('user');
    if (!userStore.isLogin) {
      uni.reLaunch({ url: '/pages/index/login' });
    }
  });
</script>

<style lang="scss" scoped>
  .logout-container {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }

  .logout-content {
    width: 600rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 50rpx 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .logout-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
  }

  .logout-icon image {
    width: 100%;
    height: 100%;
  }

  .logout-text {
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 40rpx;
  }

  .logout-buttons {
    display: flex;
    width: 100%;
  }

  .cancel-button {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #f5f5f5;
    color: #333333;
    font-size: 30rpx;
    border-radius: 40rpx;
    margin-right: 20rpx;
  }

  .confirm-button {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    background-color: var(--ui-BG-Main);
    color: #ffffff;
    font-size: 30rpx;
    border-radius: 40rpx;
    margin-left: 20rpx;
  }

  .confirm-button[loading] {
    opacity: 0.8;
  }
</style>